<template>
	<!-- 日历 -->
	<view class="content">
		<view class="calendar" >
			<template v-for="week in weeks">
				<view class="week">
					<text class="name">{{week.name}}</text>
					<text class="day" @click="changeDay" :data-week = "week.dataset" :class="{isToday:week.isToday}">{{week.day}}</text>
				</view>
			</template>
		</view>
		<!-- 任务 -->
		<template v-if="isHaveReview">
			<view class="things">
				<text class="title">{{this.dayStr}}到目前为止,之前的任务完成情况</text>
				<view class="thingsFinishRare">
					<view class="nowFinishRare">
						到目前的完成率{{this.finishRate}}%
						<view class="exmalpe">
							<view></view>
							<text style="margin-right: 20rpx;">完成</text>
							<view style="background-color: #d90509;"></view>
							<text>未完成</text>
						</view>
					</view>
					<view class="thingsKeepTime" v-for="work in todayDidWorkList" >
						<!-- 通过传入的数组中的isFinish来判断是否完成 -->
						<view class="oneThing"  :class="{isFinish:work.isFinish,isNotFinish:!work.isFinish}">
							<text class="name">{{work.thing}}</text>
							<text class="time">{{work.time}}</text>
						</view>
					</view>
				</view>
			</view>
			<!-- 未完成的任务 -->
			<view class="needDoWork">
				<text class="title">{{this.dayStr}}未完成的任务</text>
				<view class="needDoWorkMain">
					<view class="works" v-for="work in todayneedDoWorkList" >
						<view class="needOneThing">
							<text class="name">{{work.thing}}</text>
							<text class="time">{{work.time}}</text>
						</view>
					</view>
				</view>
			</view>
		</template>
		<template v-else>
			<view>暂无复盘</view>
		</template>
		<!-- 感想复盘 -->
		<!-- <view class="dreamReview" :class="{active:isActive}" ref='DreamReview' @click="doSomething"></view> -->
	</view>
</template>

<script >
	export default { 
		data() {
		    return {
				today:0,
				dayStr:'今天',
				isShow:false,
				isHaveReview:true,
				isActive: true,
				finishRate: 0,
				todayneedDoWorkList:[
					{thing:'洗澡',time:'上午6点'},
					{thing:'吃饭',time:'上午7点'},
					{thing:'上撤所',time:'上午8点'},
					{thing:'打游戏',time:'上午9点'},
					{thing:'打游戏',time:'上午10点'},
				],
				todayDidWorkList:[
					{thing:'工作',time:'下午6点',isFinish:true},
					{thing:'工作',time:'下午8点',isFinish:true},
					{thing:'工作',time:'下午9点',isFinish:false},
					{thing:'工作',time:'下午10点',isFinish:true},
					{thing:'打游戏',time:'下午11点',isFinish:false},
				],
				// weeks中的dataset用来判断 距离今天的距离 并且正数为为今天之前 负数为今天之后 负数就表明没有复盘
				weeks:[
					{name:'一',dataset:0,day:0,month:0,isToday:false},
					{name:'二',dataset:0,day:0,month:0,isToday:false},
					{name:'三',dataset:0,day:0,month:0,isToday:false},
					{name:'四',dataset:0,day:0,month:0,isToday:false},
					{name:'五',dataset:0,day:0,month:0,isToday:false},
					{name:'六',dataset:0,day:0,month:0,isToday:false},
					{name:'日',dataset:0,day:0,month:0,isToday:false},
				],
		    }      
		
		},
		// 小程序生命周期
		onLoad() {
			console.log('onLoad')
		},
		onShow() {
			console.log('onShow')
		},
		// vue生命周期
		created(){
			this.todayFinishRate()
			this.calendar()
		},
		methods:{
			// 记录完成与未完成的事情数量 计算完成率
			todayFinishRate(){
				let finish = 0
				let notFinish = 0
				for(let i = 0; i < this.todayDidWorkList.length; i++){
					if(this.todayDidWorkList[i].isFinish){
						finish++
					}else{
						notFinish++
					}
				}
				// console.log(finish,notFinish)
				this.finishRate = Math.round((finish/ (finish + notFinish)) * 100)
				this.isShow = true
			},
			changeDay(e){
				if(e.target.dataset.week >= 0){
					console.log(e.target.dataset.week)
					if(e.target.dataset.week == 0) this.dayStr = '今天'
					if(e.target.dataset.week == 1) this.dayStr = '昨天'
					if(e.target.dataset.week == 2) {
						this.dayStr = '前天'
						this.todayDidWorkList = [
							{thing:'前天1',time:'下午6点',isFinish:true},
							{thing:'前天1',time:'下午8点',isFinish:true},
							{thing:'前天1',time:'下午9点',isFinish:false},
							{thing:'前天1',time:'下午10点',isFinish:true},
							{thing:'前天1',time:'下午11点',isFinish:false},
						]
						return
					}
					if(e.target.dataset.week >= 3) {
						for(let i = 0; i < this.weeks.length; i++){
							if(e.target.dataset.week == this.weeks[i].dataset){
								this.dayStr = this.weeks[i].month+ '日' + this.weeks[i].day + '日'
								this.todayDidWorkList = [
									{thing:'工作1',time:'下午6点',isFinish:true},
									{thing:'工作1',time:'下午8点',isFinish:true},
									{thing:'工作1',time:'下午9点',isFinish:false},
									{thing:'工作1',time:'下午10点',isFinish:true},
									{thing:'打游戏1',time:'下午11点',isFinish:false},
								]
							}
						}
						return
					}
					this.todayDidWorkList = [
						{thing:'工作',time:'下午6点',isFinish:true},
						{thing:'工作',time:'下午8点',isFinish:true},
						{thing:'工作',time:'下午9点',isFinish:false},
						{thing:'工作',time:'下午10点',isFinish:true},
						{thing:'打游戏',time:'下午11点',isFinish:false},
					]
					this.isHaveReview = true
				}else{
					this.isHaveReview = false
					console.log('暂无复盘')
				}
			},
			// 日历 创建时期就执行 获得当天的月 日 和周几 根据这几个参数列出 一周中月份中的日期
			calendar(){
				let myDate=new Date()
				// 本月一共有多少天
				var curMonthDays = new Date(myDate.getFullYear(), (myDate.getMonth()+1), 0).getDate();
				// 上个月多少天
				var lastMonthDays = new Date(myDate.getFullYear(), (myDate.getMonth()), 0).getDate();
				console.log(lastMonthDays)
				let nowMonth = myDate.getMonth()+1 // 月份可能是从0开始的 所有得加1
				this.today = myDate.getDate()
				let today = this.today // 当前是该月份的几日
				let nowWeek = myDate.getDay() // 周几
				// console.log(myDate.getMonth()+1,"月",myDate.getDate(),"日","星期",nowWeek)
				// 循环修改 weeks数组中的各个初始值
				for(let i = 0; i < this.weeks.length; i++){
					if(i == (nowWeek - 1)){
						// this.weeks[i].time = `${myDate.getMonth()}-${myDate.getDate()}`
						console.log(today)
						this.weeks[i].day = today
						this.weeks[i].month = nowMonth
						this.weeks[i].isToday = true
						this.weeks[i].dataset = 0
					}else{
						// 如果超过本月的天数 月份加一  日期要再减去本月天数
						if(curMonthDays < today + (i - (nowWeek-1))){
							this.weeks[i].day = today + (i - (nowWeek-1)) - curMonthDays
							this.weeks[i].month = nowMonth + 1
							console.log(today + (i - (nowWeek-1)) - curMonthDays)
						}
						// 如果是0 或者负数就说明是上个月
						else if(today + (i - (nowWeek-1)) <= 0){
							this.weeks[i].day = lastMonthDays + (today + (i - (nowWeek-1)))
							this.weeks[i].month = nowMonth - 1
						}
						else{
							this.weeks[i].day = today + (i - (nowWeek-1))
							this.weeks[i].month = nowMonth
						}
						this.weeks[i].dataset = -(i - (nowWeek-1))
					}
					// console.log(this.weeks[i].dataset)
				}
				// console.log(this.weeks)
			},
		}
	}  
</script>

<style lang="scss" scoped>
	.content{
		box-sizing: border-box;
	}
	.active{
		background-color: red !important;
	}
	.isFinish{
		background-color: #00aa00 !important;
	}
	.isNotFinish{
		background-color: #d90509 !important;
	}
	.isToday{
		background-color: #00aa00 !important;
	}
	.content > view{
		margin-top: 50rpx;
	}
	.calendar{
		width: 94%;
		margin-left: 3%;
		border-radius: 20rpx;
		height: 140rpx;
		background-color: #FFFFFF;
		box-shadow: 0rpx 15rpx 30rpx #e8e8e8;
		/* background-color: #d90509; */
	}
	.calendar .week{
		position: relative;
		width: 12%;
		margin-left: 2%;
		margin-top: 3%;
		height: 80rpx;
		/* background-color: #007AFF; */
		display: inline-block;
		font-size: $uni-font-size-sm;
	}
	.calendar text{
		text-align: center;
		display: block;
	}
	.calendar .week .name{
		// font-size: 14px;
		font-size: $uni-font-size-sm;
	}
	.calendar .week .day:hover{
		background-color: #55ffff;
	}
	.calendar .week .day{
		background-color: #d0d0d0;
		margin: 0 auto;
		margin-top: 15rpx;
		box-sizing: border-box;
		font-size: 14px;
		width: 50rpx;
		height: 50rpx;
		border: 1px solid #333333;
		border-radius: 50%;
		line-height: 50rpx;
		color: #ffffff;
	}
	
	.title{
		height: 15%;
		min-height: 60rpx;
		font-size: 14px;
		transform: translateY(15%) translateX(3%);
		display: block;
	}
	
	.things{
		width: 90%;
		margin: 0 auto;
		/* height: 400rpx; */
	}
	.things .thingsFinishRare{
		box-sizing: border-box;
		/* border: 1px solid #333333; */
		box-shadow: 0px 6px 22px #e6e6e6;
		height: auto;
		width: 100%;
		border-radius: 20rpx;
		padding: 10rpx 10rpx;
	}
	.things .thingsFinishRare .nowFinishRare{
		position: relative;
		box-sizing: border-box;
		border-bottom: 1px solid #333333;
		height: 80rpx;
		width: 100%;
		border-top-left-radius: 15rpx;
		border-top-right-radius: 15rpx;
		padding: 20rpx;
	}
	.exmalpe{
		position: absolute;
		right: 5%;
		top: 50%;
		transform: translateY(-50%);
	}
	.exmalpe view{
		border: 1px solid #333333;
		width: 20rpx;
		height: 20rpx;
		background-color: #50aa8c;
		display: inline-block;
		transform: translateY(20%);
	}
	.exmalpe text{
		font-size: 12rpx;
		display: inline-block;
		line-height: 50rpx;
	}
	.thingsKeepTime .oneThing{
		position: relative;
		padding: 0;
		font-size: 14px;
		width: 90%;
		height: 50rpx;
		/* border: 1px solid #333333; */
			/* box-shadow: 0px 6px 22px #e6e6e6; */
		margin: 0 auto;
		margin-top: 10rpx;
	}
	.oneThing:last-child{
		margin-bottom: 10rpx;
	}
	.oneThing text{
		position: absolute;
		margin: -5rpx;
		top: 50%;
		transform: translateY(-50%);
	}
	.oneThing .name{
		left: 5%;
	}
	.oneThing .time{
		right: 5%;
	}
	
	
	.needDoWork{
		width: 90%;
		margin: 0 auto;
		/* height: 200rpx; */
	}
	.needDoWork .needDoWorkMain{
		box-sizing: border-box;
		/* border: 1px solid #333333; */
			box-shadow: 0px 6px 22px #e6e6e6;
		height: auto;
		width: 100%;
		border-radius: 15rpx;
		/* padding-top: 10rpx; */
		padding: 10rpx 10rpx;
	}
	.needOneThing{
		position: relative;
		padding: 0;
		font-size: 14px;
		width: 90%;
		height: 50rpx;
		border: 1px solid #333333;
		margin: 0 auto;
		margin-top: 10rpx;
	}
	.needOneThing:last-child{
		margin-bottom: 10rpx;
	}
	.needOneThing text{
		position: absolute;
		margin: -5rpx;
		top: 50%;
		transform: translateY(-50%);
	}
	.needOneThing .name{
		left: 5%;
	}
	.needOneThing .time{
		right: 5%;
	}
/* 	.dreamReview{
		width: 100%;
		height: 100rpx;
		background-color: #007AFF;
	} */
</style>
